import BaseGroup from '@/components/js/BaseGroup'
import { EventBus } from '@/store/index'
import { COMPONENT_TYPES } from '@/common/const-wb'
import { addEvent } from '@/plugins/dom'
import { isHasOwnProperty } from '@/plugins/utils'
import { MOBILE_WID_HEI } from '@/common/const-dif'

export default class ClickGetNumberAnim extends BaseGroup {
  constructor() {
    super();
    //子类覆盖
    this.gsap = null;//duration difDuration ease
    this.compsItemIndex = {};
    this.rightCurrentStep = {0:1,1:0,2:3,3:7,4:1,5:1,6:9,7:1,8:0}
	}

  start() {
    this.gsap = this.item.interactionData.injectJsClassObj.gsap;

    this.sortComponents = _.sortBy(this.components, (compData) => {
      return compData.commonAttr.itemIndex;
    });
    _.forEach(this.sortComponents, (compData) => {
      if(!isHasOwnProperty(this.compsItemIndex, _.toString(compData.commonAttr.itemIndex))) {
        this.compsItemIndex[compData.commonAttr.itemIndex] = [];
      }
      this.compsItemIndex[compData.commonAttr.itemIndex].push(compData);
      if(compData.id.split("-").length > 5) {
        let currentStep = _.random(0, 9);
        this.refreshSpriteSheet(compData, currentStep);
      }
    });
    // this.addClickEvent();
    this.initImgSritesheet();
    this.onSlotMachine = this.onSlotMachine.bind(this);
    EventBus.$off("slotMachine", this.onSlotMachine);
    EventBus.$on("slotMachine", this.onSlotMachine);
  }

  onSlotMachine() {
    let delay = 0;
    let len = 0;
    _.forEach(this.compsItemIndex, (comps, i) => {
      len = comps.length - 1;
      _.forEach(comps, (compData, index) => {
        let dom = document.getElementById(compData.id);
        delay += 0.1;
        if(index == 0) {
          window.gsap.to(dom, {y: (compData.conAttr.top + compData.conAttr.height*2)/MOBILE_WID_HEI.adaptiveScale, duration: this.gsap.duration, delay, onComplete: () => {
            let dom = document.getElementById(compData.id);
            window.gsap.to(dom, {y: (compData.conAttr.top - compData.conAttr.height*2)/MOBILE_WID_HEI.adaptiveScale, duration: 0})
            window.gsap.to(dom, {y: 0, delay: 0.2, ease: "elastic.out(1,0.3"});
          }});
        }else {
          window.gsap.to(dom, {y: (compData.conAttr.top + compData.conAttr.height*4)/MOBILE_WID_HEI.adaptiveScale, duration: this.gsap.duration, delay, ease: "power4.out", onComplete: () => {
            let dom = document.getElementById(compData.id);
            window.gsap.to(dom, {y: (compData.conAttr.top - compData.conAttr.height*2)/MOBILE_WID_HEI.adaptiveScale, duration: 0})
          }});
        }
      })
      if(i % 3 == 0) {
        delay += _.random(0, 0.2);
      }
    })
  }

  initImgSritesheet() {
    _.forEach(this.sortComponents, (compData) => { 
      this.refreshSpriteSheet(compData, compData.interactionData.currentStep);
    });
  }

  refreshSpriteSheet(compData, currentStep) {
    let spriteSheetObj = { currentStep };
    this.store.commit("updateComponentAttr", { 
      id: compData.id, 
      interactionData: { spriteSheetObj },
    });
    EventBus.$emit('refreshImgSpriteSheet', { id: compData.id });
  }

  addClickEvent() {
    _.forEach(this.components, (compData) => {
      if(compData.cid == COMPONENT_TYPES.wb_img){
        let img = compData.vueContainer.$refs.img;
        this.onImgClick = this.onImgClick.bind(this);
        addEvent(img, "click", this.onImgClick);
      }
    })
  }

  destroy() {
    super.destroy();
    this.gsap = null;
    this.compsItemIndex = null;
    EventBus.$off("slotMachine", this.onSlotMachine);
  }
}